<template>
  <div>
    <h2>地址选择示例</h2>
    <AddressSelector @select="handleAddressSelect" province-width="220" city-width="220" area-width="220"/>
    <AddressSelector2 @select="handleAddressSelect2" province-width="220" city-width="220"/>
    <div v-if="selectedAddress">
      <h3>选中的地址:</h3>
      <p>{{ selectedAddress?.province }}, {{ selectedAddress?.city }}, {{ selectedAddress?.area }}</p>
      <hr/>
      <p>{{ selectedAddress2?.province }}, {{ selectedAddress2?.city }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AddressSelector from '@/components/AddressSelector.vue';
import AddressSelector2 from '@/components/AddressSelector2.vue';

const selectedAddress = ref(null);
const selectedAddress2 = ref(null);

const handleAddressSelect = (address) => {
  selectedAddress.value = address;
};

const handleAddressSelect2 = (address) => {
  selectedAddress2.value = address;
};
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}

h3 {
  margin-top: 20px;
}
</style>
